<template>
    <div class="set-system">
        <van-sticky class="mb10">
            <topbar @click-left="onClickLeft" right-text="查看订单" @click-right="onClickRight"></topbar>
        </van-sticky>

        <van-cell-group class="mb10">
            <van-row>
                <van-col :span="24" style="text-align: center;padding: 20px;">实际应付</van-col>
                <van-col :span="24" style="text-align: center;padding-bottom: 20px;">
                    <span class="c-danger">¥</span>
                    <span class="c-danger" style="font-size: 30px;">{{detail.orderAmount}}</span>
                </van-col>
            </van-row>
        </van-cell-group>
        <!-- <van-cell-group class="mb10">
        <van-cell title="您的订单号" :value="params.orderCode" />
        <van-cell title="购物清单" :value="detail.ItemCount" />
        <van-cell title="待付金额" :value="'¥ ' + detail.orderAmount" />
    </van-cell-group>-->
        <div style="padding: 5px 10px;" class="u-color-gray">请选择付款方式</div>
        <van-radio-group v-model="radio">
            <van-cell-group>
                <van-cell v-for="(item,index) of payTypeList" :key="index" :title="item.name" clickable :icon="item.icon" @click="radio = item.key">
                    <van-radio checked-color="#07c160" slot="right-icon" :name="item.key" />
                </van-cell>
            </van-cell-group>
        </van-radio-group>
        <van-button style="width: 90%;margin: 1rem auto;" block round type="danger" @click="submitPay">确认支付</van-button>
    </div>
</template>
<script>
import areaList from "Assets/js/area.js";
export default {
    data() {
        return {
            isApp: this.$store.state.auth.isApp,
            yhk: require("../../assets/img/icon_yhk.png"),
            payTypeList: [
                // {
                //   name: "支付宝支付",
                //   icon: require("../../assets/img/icon_zfb.png"),
                //   key: "0"
                // }
                // {
                //   name: '微信支付',
                //   icon: require('../../assets/img/wxpay.png'),
                //   key: '1'
                // },
            ],
            orderId: "",
            detail: {
                ItemCount: 0,
                orderAmount: 0
            },
            params: {
                orderId: "",
                orderCode: ""
            },
            radio: "0",
            openid: ''
        };
    },
    mounted() {
        console.log(this.isApp)
        if(this.isApp){
            this.params.orderId =JSON.parse(window.yangcheJS.WebViewJavascriptBridge("getStoreData", "", "", "orderListPay", "")).orderId;
            this.params.orderCode =JSON.parse(window.yangcheJS.WebViewJavascriptBridge("getStoreData", "", "", "orderListPay", "")).orderCode;
            window.yangcheJS.setTitleBar(
                    false,//是否隐藏导航栏
                    "订单支付",//页面标题
                    "查看订单",//右上角文案
                    "onClickRight()",//右上角js
                    "refreshView",//返回上一级功能
                    ""//导航栏颜色默认白色
            )
        }else{
            this.params.orderId = this.$route.query.orderId;
            this.params.orderCode = this.$route.query.orderCode;
        }

        if (this.getIsWxClient()) {
            if (this.$route.query.openid) {
                this.openid = this.$route.query.openid
            } else {
                this.getOpenid()
            }
            this.payTypeList.push(
                {
                    name: '微信支付',
                    icon: require('../../assets/img/wxpay.png'),
                    key: '1'
                },
            )
            this.radio = '1'
        } else {
            this.payTypeList.push(
                {
                    name: "支付宝支付",
                    icon: require("../../assets/img/icon_zfb.png"),
                    key: "0"
                }
            )
        }
        this.getDetail();
    },
    methods: {
        getOpenid() {
            location.href = `//wechat.yangche51.com/oauth.ashx?url=https%3A%2F%2Fmobile.yangche51.com%2F%23%2Forder%2Fpay%3ForderId%3D${this.params.orderId}%26orderCode%3D${this.params.orderCode}`
            // order/pay?orderId=831355&orderCode=1582534832402&openid=qwe
            // window.open(`//wechat.yangche51.com/oauth.ashx?url=//mobile.yangche51.com/#/order/pay?orderId=${this.params.orderId}&orderCode=${this.params.orderCode}`)
        },
        getIsWxClient() {
            /**
             * 判断是否是微信环境
             */
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                return true;
            }
            return false;
        },
        submitPay() {
            if (this.$store.state.auth.isApp) {
                window.yangche51AppPayReturn = (result) => {
                    if(result){
                        this.$toast('支付成功')
                        this.onClickRight()
                    }else{
                        this.$toast('支付失败')
                    }
                }
                try {
                    window.yangcheJS.WebViewJavascriptBridge(
                        'pay',
                        {
                            orderId: this.params.orderId,
                            orderCode: this.params.orderCode,
                            price: this.detail.orderAmount
                        },
                        location.href
                    )
                } catch (e) {
                    
                }
            }else{
                switch (Number(this.radio)) {
                    case 0:
                        this.payzfb();
                        break;
                    case 1:
                        this.paywx()
                        break;
                }
            }
        },
        onClickRight() {
            this.$router.push({
                name: "order-detail",
                query: {
                    orderId: this.params.orderId
                }
            });
        },
        paywx() {
            $.get('//pay.yangche51.com/wapPayment.ashx', {
                // 订单编码
                hidOrderCode: this.detail.orderCode,
                hidPayPlat: 19,
                // 订单id
                hidOrderIds: this.detail.hidOrderIds,
                // 微信openid
                oID: this.openid,
                hidOrderamount: this.detail.orderAmount
            },
                (msg, status) => {
                    WeixinJSBridge.invoke('getBrandWCPayRequest', {
                        appId: msg.appid,
                        timeStamp: msg.timestamp,
                        nonceStr: msg.noncestr,
                        package: msg.package,
                        signType: msg.signType,
                        paySign: msg.sign
                    }, (res) => {
                        let status = res.err_msg.split(':')[1]
                        if (status == 'ok') {
                            this.onClickRight()
                            // 使用以上方式判断前端返回,微信团队郑重提示：
                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                        } else {
                            if (status == 'cancel') {
                                this.$toast('取消支付');
                            } else {
                                this.$toast(status)
                            }
                        }
                    })

                },
                'jsonp'
            ).fail(function (a, b, c) {
                debugger
            });

        },
        payzfb() {
            let notify_url = encodeURIComponent(
                "//mm.yangche51.com/comonets/#!/paysucess/"
            );
            let s_url = encodeURIComponent(
                `//mm.yangche51.com/comonets/#!/payorder/?orderId=${this.params.orderId}&orderCode=${this.params.orderCode}`
            );

            let href = `//pay.yangche51.com/payment.aspx?hidOrderCodes=${this.params.orderCode}&hidUserId=${this.$store.state.auth.user.userId}&hidPayPlat=24&hidOrderIds=${this.params.orderId}&hidOrderamount=${this.detail.hidOrderAmount}&notify_url=${notify_url}&s_url=${s_url}`;

            console.log(href);

            location.href = href;
        },
        payyhk() {
            //   this.$http.get('//krow.feiduzi2.com/copystat?callback=jsonp1578747359427&qd=by030&t=7.355531860774166&h=has&_time=1578747359427').then(res => {

            //   })
            this.$http
                .get("//pay.yangche51.com/payment.aspx", {
                    params: {
                        hidOrderCodes: this.params.orderCode,
                        hidUserId: this.$store.state.auth.user.userId,
                        hidPayPlat: 20,
                        hidOrderIds: this.params.orderId,
                        hidOrderamount: this.detail.hidOrderAmount,
                        notify_url: "//mm.yangche51.com/comonets/#!/paysucess/",
                        s_url: `//mm.yangche51.com/comonets/#!/payorder/?orderId=${this.params.orderId}&orderCode=${this.params.orderCode}`
                    }
                })
                .then(response => {
                    // self.detail = response.data.Body
                    // console.log(self.detail)
                    // self.detail.ItemCount = `${self.detail.ItemCount}件商品`
                });
        },
        async getDetail() {
            this.$http
                .post("/Order/CreateOrder/PayOrderDetail", this.params)
                .then(response => {
                    if (response.data.Header.ErrorCode != 0) {
                        this.$toast(response.data.Header.Message);
                    } else {
                        this.detail = response.data.Body;
                        this.detail.ItemCount = `${this.detail.ItemCount}件商品`;
                    }
                });
        },
        onClickLeft() {
            history.go(-1);
        }
    }
};
</script>
<style lang="less" scoped>
.set-system {
    .van-nav-bar__text {
        color: #323233;
    }
    .login-out {
        display: block;
        text-align: center;
        line-height: 50px;
        height: 50px;
    }
}
</style>